<template>
  <div>

			<!--面包屑导航-->
			<Breadcrumb :datas="datas" ></Breadcrumb>

	

	<section class="featured-block text-center">
		<div class="container">


			<table>
					<tr >
						<td style="padding:5px;">
							
							用户名:

						</td>
						<td style="padding:5px;">
							
							<input type="text" v-model="username" />

						</td>
					</tr>

					<tr>
						<td style="padding:5px;">
							
							密码:

						</td>
						<td style="padding:5px;">
							
							<input type="password" v-model="password" />

						</td>
					</tr>
					<tr>
						<td style="padding:5px;">
							<!-- 滑块验证码 -->
							<drag-verify
								:width="width"
								:height="height"
								:text="text"
								ref="Verify"
							></drag-verify>
							
						</td>
						<td style="padding:5px;">
							
							

						</td>
					</tr>

					<tr>
						<td style="padding:5px;">
							

						</td>
						<td style="padding:5px;">
							
							<Button @click="submit">登录</Button> &nbsp;&nbsp;
							
							<img style="cursor:pointer" @click="dingding" src="http://localhost:8000/static/dingding.png" />
						</td>
					</tr>

			</table>
		</div>
	</section>
	<myfooter></myfooter>

  </div>
  
</template>

<script>

//导包
import myfooter from './myfooter'
import dragVerify from 'vue-drag-verify'
import {config,formatXml} from '../config'
export default {
  data () {
    return {
      //声明面包屑变量
      datas:[{title:'登录页面'}],
      username:'',
      password:'',
	  code:'',
	  //滑块验证码
	  text:'请将滑块拖动到最右侧',
	  width:300,
	  height:40,
    }
  },
  //注册组件标签
  components:{
		  
		  'myfooter':myfooter,
		  'dragVerify':dragVerify
  },
  methods:{
	  //钉钉登录
	dingding(){

	var appid = 'dingoaukgkwqknzjvamdqh';
    var redirect_uri = 'http://localhost:8000/dingding_back2/';

	var url = 'https://oapi.dingtalk.com/connect/qrconnect?appid='+appid+'&response_type=code&scope=snsapi_login&state=STATE&redirect_uri='+redirect_uri;
	
	window.location.href = url;


	},
	  
  	//提交登录
  	submit:function(){
		 //判断是否拖动滑块
		console.log(this.$refs.Verify.isPassing);
		
  		if(this.username == ''){
  			//alert('用户名不能为空');
  			this.$Message('用户名不能为空');
  			return false;
  		}
  		if(this.password == ''){
  			//alert('用户名不能为空');
  			this.$Message('密码不能为空');
  			return false;
		  }
		  
		
  		//发送请求
  		this.axios.get('http://localhost:8000/login2/',{params:{username:this.username,password:this.password}}).then((result) =>{

  						console.log(result);
  						this.$Message(result.data.message);
  						if(result.data.code == 200 ){
  							//将用户名和id存储到localstorage
	  						localStorage.setItem('username',result.data.username);
	  						localStorage.setItem('uid',result.data.uid);
	  						
	  						//跳转
	  						this.$router.push('/');

  						}

  		});



  	}

     
  }
}


</script>
 
<style>



</style>